<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :usePage="true"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          :useAction="false"
          height="350"
        >
        </Table>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <Card title="图表分析" style="margin-bottom: 20px">
          <template #subTitle>
            <div style="height: 45px">
              <el-date-picker
                v-model="tjDate"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="initData"
                style="line-height: 45px !important"
              />
              <el-button @click="resetDate" style="line-height: 45px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar2Vue ref="pcrwtj"></Bar2Vue>
              </el-col>
            </el-row>
          </template>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/hdwarning/immediate.js";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import Card from "./components/Card.vue";

import Bar2Vue from "./components/Bar2.vue";
import { formatDate } from "@/utils/index.js";
const { proxy } = getCurrentInstance();

const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["mesureTime", "alarmLevel", "databaseBitNumber", "gasDetection"].includes(
      i.prop
    )
  ),
});
const showSearch = ref(true);
const table = ref();
const pcrwtj = ref();
const formatList = (list) => {
  list.forEach(
    (item) => (item.mesureTime = formatDate(Number(item.mesureTime)))
  );
  return list;
};
const { fetchData, getList, queryParams } = useAsyncData({
  APIS: {
    query: APIS.lightningData,
  },
  formJson,
  table,
  proxy,
  formatList,
});
onMounted(() => {
  initData();
});

const tjDate = ref([]);
const initData = () => {
  APIS.getLdTjData({
    startTime: tjDate.value[0] || null,
    endTime: tjDate.value[1] || null,
  }).then((res) => {
    const list = res.data;
    pcrwtj.value.setData({
      data: [
        {
          name: "温度℃",
          type: "line",
          data: list.map((item) => {
            return item.temperature;
          }),
          sommth: true,
        },
        {
          name: "湿度%",
          type: "line",
          data: list.map((item) => {
            return item.humidity;
          }),
          sommth: true,
        },
        {
          name: "气压Pa",
          type: "line",
          data: list.map((item) => {
            return item.pressure;
          }),
          sommth: true,
        },
        {
          name: "风速m/s",
          type: "line",
          data: list.map((item) => {
            return item.windspeed;
          }),
          sommth: true,
        },
        {
          name: "24小时降水量",
          type: "line",
          data: list.map((item) => {
            return item.rainfall;
          }),
        },
        {
          name: "闪电次数",
          type: "line",
          data: list.map((item) => {
            return item.lightningCount;
          }),
          sommth: true,
        },
      ],
      yAxis: list.map((item) => {
        return formatDate(Number(item.mesureTime));
      }),
      title: "雷电预警统计",
    });
  });
};
const resetDate = () => {
  tjDate.value = [];
  initData();
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
